<template>
  <div id="app" style="margin-bottom: 200px;">
    <div style="text-align: right;">
      <el-button type="success" @click="linkWindows(1)">段位&奖励</el-button>
    </div>
    <h3>1-基本信息</h3>
    <el-form ref="basic_data" :model="basic_data" :rules="rules" label-width="250px">
      <el-form-item label="project">
        <el-input v-model="listQuery.project" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="活动类型">
        <el-select v-model.number="event_type">
          <el-option v-for="item in [{'label': '联盟使命', 'value': 0}, {'label': '地狱活动', 'value': 1},{'label': '个人活动', 'value': 2}]"
            :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="得分项">
        <el-select v-model="basic_data.score_id" multiple>
          <el-option v-for="item in score_id_list"
            :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>


    </el-form>
    <el-button type="primary" @click="onSubmit('basic_data')">提交</el-button>
  </div>
</template>

<script>
  import { fetchList} from '@/api/index'
  export default {
    data() {
      return {
        listQuery: {
          'action': 'extreme_user_event_project',
          'project': 0,
          'type': 'index',
          'data': null
        },
        listLoading: true,
        basic_data: {},
        event_type:'',
        score_id_list:[],
        rules: {
        }
      }
    },
    created() {
      this.listQuery.project = this.$route.query.project
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true;
        this.listQuery.type = 'basic'
        fetchList(this.listQuery).then(response => {
          this.basic_data = response.data
          this.event_type = response.event_type
          this.score_id_list = response.score_id_list
          this.listLoading = false
        })
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.listQuery.type = 'update_basic';
            this.listQuery.data = this.basic_data;
            this.listQuery.event_type = this.event_type;
            fetchList(this.listQuery).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                  title: 'Success',
                  message: response.msg,
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$notify.error({
                  title: '错误',
                  message: response.msg
                });
              }
            })
            return false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      linkWindows(type) {
        if (type == 1) {
          var action = 'rank'
        }
        let routeData = this.$router.resolve({
          path: "/" + this.listQuery.action + "/" + action + "/",
          query: {
            project: this.listQuery.project
          },
        });
        window.open(routeData.href, '_blank');
      }
    }
  }
</script>

<style scoped>
  #app {
    margin: 0 auto;
    width: 70%;
    height: 750px;
  }
</style>
